<template>
<!--  会员统计  -->
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="89px"
    >
      <el-form-item label="年" prop="yearValue">
        <el-date-picker
          v-model="queryParams.yearValue"
          type="year"
          placeholder="选择年">
        </el-date-picker>
      </el-form-item>
        <!--      月-->
      <el-form-item label="月" prop="monthValue">
        <el-date-picker
          v-model="queryParams.monthValue"
          type="month"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
        <!--      周-->
      <el-form-item label="周" prop="weekValue">
        <el-date-picker
          v-model="queryParams.weekValue"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button
        >
      </el-form-item>
    </el-form>

      <el-card class="box-card" style="width: 700px; height: 450px;margin-left: 10px;margin-top: 20px">
        <!--会员入场情况(横向柱状图)-->
        <div id="main" class="picture_w" style="width: 500px; height: 350px;margin-left: 15%;margin-top: 10%;"></div>
      </el-card>
      <el-card class="box-card" style="width: 700px; height: 450px;margin-left: 750px;margin-top: -450px">
        <!--会员入场情况(横向柱状图)-->
        <div id="mainLine" class="picture_w" style="width: 500px; height: 350px;margin-left: 18%;margin-top: 10%;"></div>
      </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import moment from 'moment';
import {getMemberEntranceTimes,getMemberUserCardDate} from "@/api/memberStatistics/index";
export default {
  name: "index",
  data() {
    return {
      showSearch: true,//显示搜索条件
      // 查询参数
      queryParams: {
        yearValue:'',
        monthValue:'',
        weekValue:'',
      },

    }
  },
  mounted() {
    this.renderChart();
    this.lineChart();
  },
  methods: {
    handleQuery (){
      this.renderChart();
      this.lineChart();
    },
    //统计会员入场的次数
    renderChart() {
      var that = this;
      var chartDom = document.getElementById('main');
      if (chartDom) {
        var myChart = echarts.init(chartDom);
        var option;
        // 获取会话存储的值
        const venueUniqueIdentifier = sessionStorage.getItem('venueUniqueIdentifier');
        const selectedYear = new Date(this.queryParams.yearValue).getFullYear().toString();
        const selectedMonth = new Date(this.queryParams.monthValue).getMonth() + 1;
        var selectedWeek = '';
        if (this.queryParams.weekValue != null && this.queryParams.weekValue != "" && this.queryParams.weekValue != undefined){
          selectedWeek = moment(this.queryParams.weekValue, "YYYY 第 WW 周").format("W");
        }else {
          selectedWeek = null
        }
        getMemberEntranceTimes(venueUniqueIdentifier,selectedYear,selectedMonth,selectedWeek).then((res) => {
          console.log(res.data.data)
          var times = res.data.data.map(item => item.times);
          var memberUserRealName = res.data.data.map(item => item.memberUserRealName);

          // 对 times 数组进行排序，并将 memberUserRealName 数组也进行相同的排序
          let sortedIndex = times.map((item, index) => ({ index, value: item })).sort((a, b) => a.value - b.value).map(item => item.index);
          let sortedTimes = sortedIndex.map(index => times[index]);
          let sortedMemberUserRealName = sortedIndex.map(index => memberUserRealName[index]);
          option = {
            title: {
              text: '会员入场情况',
              left:'center'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['入场次数'] // 图例名称
            },
            yAxis: {
              name: '姓名',
              type: 'category',
              data: sortedMemberUserRealName
            },
            xAxis: {
              type: 'value'
            },
            series: [
              {
                name: '次数',
                type: 'bar',
                coordinateSystem: 'cartesian2d',
                data: sortedMemberUserRealName.map((item, index) => ({name: item, value: sortedTimes[index]})),
                // itemStyle: {
                //   color: "blue" // 设置柱状图的颜色为红色
                // }
              }
            ]
          };
          option && myChart.setOption(option);
        })
      }
    },
    //统计会员办卡情况（折线图）
    lineChart(){
      var that = this;
      var chartDom = document.getElementById('mainLine');
      if (chartDom) {
        var myChart = echarts.init(chartDom);
        var option;
        // 获取会话存储的值
        const venueUniqueIdentifier = sessionStorage.getItem('venueUniqueIdentifier');
        const selectedYear = new Date(this.queryParams.yearValue).getFullYear().toString();
        const selectedMonth = new Date(this.queryParams.monthValue).getMonth() + 1;
        var selectedWeek = '';
        if (this.queryParams.weekValue != null && this.queryParams.weekValue != "" && this.queryParams.weekValue != undefined){
          selectedWeek = moment(this.queryParams.weekValue, "YYYY 第 WW 周").format("W");
        }else {
          selectedWeek = null
        }
        getMemberUserCardDate(venueUniqueIdentifier,selectedYear,selectedMonth,selectedWeek).then((res) => {
          console.log(res.data.data)
          var startTime = res.data.data.map(item => item.startTime);
          var userNumber = res.data.data.map(item => item.userNumber);

          option = {
            title: {
              text: '会员办卡情况'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['人数'] // 图例名称
            },
            xAxis: {
              name: '日期',
              type: 'category',
              data: startTime
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '人数',
                type: 'line',
                coordinateSystem: 'cartesian2d',
                data: userNumber
              }
            ]
          };
          option && myChart.setOption(option);
        })
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  margin-left: 30px;
  margin-top: 50px;
}
.demonstration {
  margin-left: 30px;
}
</style>
